<template>
    <el-main>
        <el-row :gutter="20">
            <el-card class="box-card" style="min-height: 200px;">
                <avue-crud ref="crud" :data="advsSettingListData" :option="option" :page="page" @refresh-change="refresh"
                    @size-change="sizeChange" @current-change="currentChange" @row-save="handleSave" @row-update="handleUpdate"
                    @search-change="searchChange" @search-reset="searchReset">
                    <template slot-scope="scope" slot="menu">
                        <el-button icon="el-icon-edit" :size="scope.size" :type="scope.type" @click="$refs.crud.rowEdit(scope.row, scope.index)">编辑</el-button>
                        <el-button icon="el-icon-delete" :size="scope.size" :type="scope.type"
                            @click="handleRemove(scope.row)">删除</el-button>
                    </template>

                </avue-crud>
            </el-card>
        </el-row>
    </el-main>
</template>

<script>
    export default {
        data() {
            return {
                searchForm: {
                    keyword: '',
                    type: '',
                    style: 'all',
                    searchdate: [],
                },
                page: {
                    currentPage: 1,
                    total: 0,
                    pageSize: 10
                },
                status: "1",
                advsSettingListData: [],
                permission: {},
                option: {
                    // index: true,
                    // indexLabel: '序号',
                    page: true,
                    align: 'center',
                    menuAlign: 'center',
                    size: 'small',
                    dialogWidth: '35%',
                    dialogTop: 200,
                    delBtn: false,
                    editBtn: false,
                    viewBtn: true,
                    // searchBtn: true,
                    searchShow: true,
                    filterBtn: false,
                    columnBtn: false,
                    searchMenuSpan: 5,
                    column: [{
                        label: '筛选广告',
                        prop: 'style',
                        span: 24,
                        type: 'select',
                        addDisplay: false,
                        editDisplay: false,
                        viewDisplay: false,
                        search: true,
                        hide: true,
                        dicData: [{
                            label: '全部',
                            value: 'all'
                        }, {
                            label: '过期',
                            value: 'passed'
                        }, {
                            label: '生效中',
                            value: 'activiting'
                        }, {
                            label: '等待中',
                            value: 'waiting'
                        }],
                    }, {
                        label: '筛选日期',
                        prop: 'searchdate',
                        type:'datetime',
                        addDisplay: false,
                        editDisplay: false,
                        viewDisplay: false,
                        searchSpan:12,
                        searchRange:true,
                        search:true,
                        valueFormat: "yyyy-MM-dd hh:mm:ss",
                        hide: true
                    }/* , {
                        label: '过期时效',
                        prop: 'passtime',
                        span: 24,
                        addDisplay: false,
                        editDisplay: false,
                        viewDisplay: false,
                        slot:true
                    } */, {
                        label: '公司名称',
                        prop: 'advcomname',
                        span: 24,
                        rules: [{
                            required: true,
                            message: "公司名称不能为空",
                        }]
                    }, {
                        label: '联系人',
                        prop: 'advcomcontactname',
                        span: 24,
                        rules: [{
                            required: true,
                            message: "联系人不能为空",
                        }]
                    }, {
                        label: '联系电话',
                        prop: 'advcomcontact',
                        span: 24,
                        width: 150,
                        rules: [{
                            required: true,
                            message: "联系电话不能为空",
                        }]
                    }, {
                        label: '广告标题',
                        prop: 'title',
                        span: 24,
                        rules: [{
                            required: true,
                            message: "广告标题不能为空",
                        }]
                    }, {
                        label: '广告简述',
                        prop: 'description',
                        span: 24,
                    }, {
                        label: '广告图片',
                        prop: 'imageurl',
                        span: 24,
                        hide: true,
                        type: 'upload',
                        listType: 'picture-img',
                        propsHttp: {
                            res: 'data',
                        },
                        loadText: '附件上传中，请稍等',
                        tip: '只能上传jpg/png文件，且不超过2M',
                        action: "/api/zhihu/imageUpload"
                    }, {
                        label: '图片链接',
                        prop: 'imagelink',
                        span: 24,
                        hide: true
                    }, {
                        label: '广告链接',
                        prop: 'blanklinkurl',
                        span: 24,
                        hide: true
                    }, {
                        label: '广告类型',
                        prop: 'type',
                        span: 24,
                        type: 'select',
                        search: true,
                        dicData: [{
                            label: 'VIP',
                            value: 'vip'
                        }, {
                            label: '普通',
                            value: 'general'
                        }, {
                            label: '公益',
                            value: 'welfare'
                        }],
                        rules: [{
                            required: true,
                            message: "广告类型不能为空",
                        }]
                    }, {
                        label: '开始时间',
                        prop: 'start_date',
                        type: "datetime",
                        valueFormat: "yyyy-MM-dd HH:mm:ss",
                        span: 24,
                        rules: [{
                            required: true,
                            message: "开始时间不能为空",
                        }]
                    }, {
                        label: '截止时间',
                        prop: 'end_date',
                        type: "datetime",
                        valueFormat: "yyyy-MM-dd hh:mm:ss",
                        span: 24,
                        rules: [{
                            required: true,
                            message: "截止时间不能为空",
                        }]
                    }, {
                        label: '创建时间',
                        prop: 'created_at',
                        addDisplay: false,
                        editDisplay: false,
                        span: 24,
                        width: 140
                    }, {
                        label: '关键字',
                        prop: 'keyword',
                        addDisplay: false,
                        editDisplay: false,
                        viewDisplay: false,
                        search: true,
                        span: 24,
                        width: 180,
                        hide: true,
                        searchPlaceholder: '广告标题|公司名称'
                    }]
                },
            }
        },
        created() {
            this.advsSettingList()
        },
        methods: {
            searchChange(params, done) {
                done();
                // Object.assign(params, this.searchForm)
                this.searchForm.type = params.type || ''
                this.searchForm.style = params.style || 'all'
                this.searchForm.keyword = params.keyword || ''
                this.searchForm.searchdate = params.searchdate || []
                this.advsSettingList()
            },
            searchReset() {
                this.searchForm = {}
                this.advsSettingList()
            },
            // 分页
            sizeChange(val) {
                this.page.currentPage = 1
                this.page.pageSize = val
                this.advsSettingList()
            },
            // 当前页
            currentChange(val) {
                this.page.currentPage = val
                this.advsSettingList()
            },
            // 刷新
            refresh() {
                this.advsSettingList()
            },
            // 新增保存
            handleSave(row, done, loading) {
                this.handleAxiosFun(this.$API.ZHIHUAPI.advsSettingCreate, row, done, loading)
            },
            // 修改保存
            handleUpdate(row, index, done, loading) {
                this.handleAxiosFun(this.$API.ZHIHUAPI.advsSettingEdit, row, done, loading)
            },
            advsSettingList() {
                const _this = this
                const params = {
                    keyword: _this.searchForm.keyword,
                    page: _this.page.currentPage,
                    limit: _this.page.pageSize,
                    type: _this.searchForm.type,
                    style: _this.searchForm.style,
                    searchdate: _this.searchForm.searchdate,
                }
                _this.axios.post(_this.$API.ZHIHUAPI.advsSettingList, _this.qs.stringify(params)).then((res) => {
                    res = res.data
                    // console.log(res)
                    if (res.code === 10000) {
                        if (res.hasOwnProperty('data') && Object.keys(res.data).length > 0) {
                            _this.advsSettingListData = res.data.list
                            _this.page.total = res.data.count
                        } else {
                            _this.advsSettingListData = []
                            _this.page.total = 0
                        }
                    } else {
                        _this.$message({
                            showClose: false,
                            message: res.message,
                            type: 'error'
                        })
                        _this.advsSettingListData = []
                        _this.page.total = 0
                    }
                }).catch(() => {
                    _this.$message({
                        showClose: false,
                        message: '网络连接失败，请重试！',
                        type: 'error'
                    })
                    _this.advsSettingListData = []
                    _this.page.total = 0
                })
            },
            // 删除
            handleRemove(row) {
                const params = {
                    id: row.id
                }
                var _this = this
                _this.$confirm('是否确认删除#' + row.title, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(function() {
                    _this.handleAxiosFun(_this.$API.ZHIHUAPI.advsSettingRemove, params)
                }).catch(() => {})
            },
            handleAxiosFun(url, params, done, loading) {
                const _this = this
                _this.axios.post(url, _this.qs.stringify(params)).then((res) => {
                    if (res.data.code === 10000) {
                        _this.$message({
                            showClose: false,
                            message: res.data.message,
                            type: 'success'
                        })
                        _this.refresh()
                        if (done) {
                            done()
                        }
                    } else {
                        _this.$message({
                            showClose: false,
                            message: res.data.message,
                            type: 'error'
                        })
                        if (loading) {
                            loading()
                        }
                    }
                }).catch(() => {
                    _this.$message({
                        showClose: false,
                        message: '网络连接失败，请重试！',
                        type: 'error'
                    })
                    if (loading) {
                        loading()
                    }
                })
            }
        }
    }
</script>

<style>
</style>
